<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList 任务管理器</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        #tasks {
            margin-bottom: 20px;
        }

        /* 蓝色主题的表格样式 */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #4287f5; /* 蓝色 */
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #4287f5; /* 蓝色 */
            color: white;
        }

        .deleteTask {
            background-color: #f44336; /* 删除按钮的红色 */
            color: white;
            border: none;
            padding: 6px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>ToDoList 任务管理器</h1>
    <div id="taskInput">
        <input type="text" id="newTask" placeholder="输入任务">
        <button id="addTask">添加任务</button>
    </div>
    <div id="tasks">
        <h2>任务列表</h2>
        <table id="taskList">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>任务</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 任务内容将动态添加到这里 -->
            <tbody>
                <!-- 动态添加的任务行 -->
            </tbody>
        </table>
    </div>
    <div id="history">
        <h2>历史记录</h2>
        <table id="historyList">
            <!-- 表头 -->
            <thead>
                <tr>
                    <th>任务</th>
                </tr>
            </thead>
            <!-- 历史记录内容将动态添加到这里 -->
            <tbody>
                <!-- 动态添加的历史记录行 -->
            </tbody>
        </table>
    </div>

    <script>
        $(document).ready(function() {
            // 添加任务
            $("#addTask").click(function() {
                var taskName = $("#newTask").val();
                if (taskName !== "") {
                    // 创建包含任务和删除按钮的新行
                    var newRow = "<tr class='task'><td>" + taskName + "</td><td><button class='deleteTask'>删除</button></td></tr>";
                    $("#taskList tbody").append(newRow);
                    $("#newTask").val(""); // 清空输入框
                } else {
                    alert("请输入任务内容！");
                }
            });

            // 删除任务
            $(document).on("click", ".deleteTask", function() {
                var taskRow = $(this).closest("tr");
                var deletedTask = taskRow.find("td:first").text(); // 获取任务内容
                var historyRow = "<tr><td>" + deletedTask + "</td></tr>"; // 创建历史记录行
                $("#historyList tbody").append(historyRow); // 将历史记录行添加到历史记录表格
                taskRow.remove(); // 从任务列表中移除任务行
            });
        });
    </script>
</body>
</html>
